<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>charset control</title>
		<style type="text/css">
			.btn {
				display: inline-block;
				padding: 6px 12px;
				margin-bottom: 0;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				cursor: pointer;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px
			}

			.btn-primary {
				color: #fff;
				background-color: #337ab7;
				border-color: #2e6da4
			}

			.btn-primary.focus,
			.btn-primary:focus {
				color: #fff;
				background-color: #286090;
				border-color: #122b40
				
			}

			.btn-primary:hover {
				color: #fff;
				background-color: #286090;
				border-color: #204d74
			}

			.btn-primary .badge {
				color: #337ab7;
				background-color: #fff
			}

			.btn-default {
				color: #333;
				background-color: #fff;
				border-color: #ccc
			}

			.btn-default.focus,
			.btn-default:focus {
				outline: none;
			}
            .btn-default:active{
				color: #333;
				background-color: #e6e6e6;
				border-color: #ccc
			
			}
			.btn-default:hover {
				/*color: #333;
				background-color: #e6e6e6;
				border-color: #adadad*/
			}

			.btn-default .badge {
				color: #fff;
				background-color: #333
			}

			.form-control {
				display: block;
				width: 100%;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			}

			.form-control:focus {
				border-color: #66afe9;
				outline: 0;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
			}

			#content {
				width: 800px;
				height: 320px;
				padding: 10px;
				margin: 50px auto;
				border: 1px solid #ccc;
			}

			#txt {
				width: 400px;
				height: 300px;
				padding: 30px 0;
			}

			#bt {
				width: 320px;
			}

			#content>div {
				float: left;
			}

			.form-control {
				width: 350px;
				height: 200px;
				margin-bottom: 10px;
				resize: none;
			}

			#bt button {
				display: block;
				width: 100px;
				height: 100px;
			}

			#txt button {
				width: 375px;
			}

			#bt>button {
				margin: auto;
			}

			#bt>button:nth-last-of-type(4) {
				margin-top: 10px;
				float: left;

			}

			#bt>button:nth-last-of-type(3) {
				float: left;
				margin: 10px;
			}

			#bt>button:nth-last-of-type(2) {
				float: right;
				margin-top: 10px;
			}

			#bt>button:nth-last-of-type(1) {
				clear: both;
			}

			#wrap {
				position: relative;
				height: 200px;
			}

			#wrap span {
				margin-top: 20px;
				position: absolute;
				width: 7px;
				height: 7px;
				border: 1px solid red;
				background-color: #e74c3c;
				box-shadow: 0px 0px 10px #e74c3c;
			}

			@font-face {
				font-family: "iconfont";
				src: url('iconfont.eot?t=1605326438202');
				/* IE9 */
				src: url('iconfont.eot?t=1605326438202#iefix') format('embedded-opentype'),
					/* IE6-IE8 */
					url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAACaAAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMAqFUIRAATYCJAMYCw4ABCAFhG0HgTMbOQjIrjEG1w+kjdCsx3ow26yy4m7TvOA/wHERD337vd7ZnbdBcEgqJzItS1RVBKqS0Fax0NXVrER80Yj//++v7h+Irw1cykwodoM3OSTQIf6zjU6DtHGbLufqkIT5uZVHpE49kQJWgU2aUjrp9oGFdt8AtMzwwCE3v8vBApMEMitBnfObANSYXX3C/8+x1IvSA8tvdy1wqJVJWevne+Oy5Ioi20AG4FvUKwcmg/D5ZgKD5plhp52XN7maBHsF4m5Bs1ytFJZSQfbrWsuJKd5Cp7+8JgQ5b+Lfj/+wChpFV8GBF+4cydzuL3pXUez/f+VSiADJek4op1GxCyRxq9V9RTFN7yIatDhL9oAmVWWt4P+JUVKxrW0nTRZVKv880YB6mGLPZDp+0X06wS8pncIvGZ3KLzmd5JfCrKP6tmLTOPCZWFefsaZiYHh4nOTrB7xPv/7Y9T71fA8dz3277/7e/fDgeXryPT6GWZ92FMXZXV17fVtemNryEoNP79vuQcKhkx+7zTkrFXIPBR/ctnSuWNQ9en4c3BVmr1jQO3h8Ht0U6cFZz4CL4U1b73dkhMrPaEQQyPOy9uj6GeklqlAKqZzvsjHXe5gXD3mxo+vegQ1gsfa/gFDpBY0IAnG+IflF22+vXkWi9SclntNoclrYvuDGPc73Fb74aHLycB6+mAPSj1J+YmN8PL4YNOH/yX9M1An34LtGgsOHRjbes/eX1FdAvzJD8m9IRo5IWwaWlmZ3v06g2S2I11IOYoxeDvyTPpl2ZnSS0F+SKFD0mYOq3yoysbvQGbIPTb9jMGiH6/QhU8qKIgewbYRAGHcIxaifUI27QCb2AzqzvqAZDyIMuhhTFxyyHgXGqTIyQgn8HYywsfJs1EiKr1BnIXNFWUy6Q5eaGCxni2ruBGN0axySvugVkQLlbATH5HYYhhYSZ30UNPOIku18rtq+aSZslGs4xUEMQRJIegcKBCumwqlJo/bzV5CWCTGup6vFewc5KbN84GBlH4E8Ucejup7lNRUvtJUqooAsx4oAJ3GiENMWKLZv50MCmcnPSCa2bGys7Fj1bH9tdJWnwSB4XIsSNTK6aNGn714h1h+e2VEs1m8mILxnSj+JkM2mFQGdYL/HmHpavzOFQb889ZHZXA4AAA==') format('woff2'),
					url('iconfont.woff?t=1605326438202') format('woff'),
					url('iconfont.ttf?t=1605326438202') format('truetype'),
					/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
					url('iconfont.svg?t=1605326438202#iconfont') format('svg');
				/* iOS 4.1- */
			}

			.iconfont {
				font-family: "iconfont" !important;
				font-size: 30px;
				color: skyblue;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			.icon-tingzhi:before {
				content: "\e609";
			}

			.icon-fangxiangyuanjiantou-xiangyou:before {
				content: "\e617";
			}

			.icon-fangxiangyuanjiantou-xiangshang:before {
				content: "\e618";
			}

			.icon-fangxiangyuanjiantou-xiangxia:before {
				content: "\e619";
			}

			.icon-fangxiangyuanjiantou-xiangzuo:before {
				content: "\e61a";
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="txt">
				<div id="tx">
					<textarea class="form-control" cols="1" rows="8" id="text" maxlength="50" placeholder="支持汉字 英文 数字，最大50个字。"></textarea>
					<button class="btn btn-default" type="button" onclick="submit()">提交</button>
				</div>
			</div>
			<div id="bt">
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','up')">&#xe618;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','left')">&#xe61a;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','stop')">&#xe609;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','right')">&#xe617;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','down')">&#xe619;</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function fun(txt, direction) {
			var xmlhttp;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			if (txt != '') {

				xmlhttp.open("get", "/set?txt=" + txt, true);

			}
			if (direction != '') {
				xmlhttp.open("get", "/set?dir=" + direction, true);
			} 
			xmlhttp.send()
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var responseText = xmlhttp.responseText;
					alert(responseText);
				}
			}
		}

		function submit() {
			var s = document.getElementById("text").value
			fun(s, '')
		}
	</script>


</html>
